<template>
  <div class="echart-property-popup">
    <div class="rooter">
      <span class="title el-form-item__label">{{ $demoi18n('panel.typeSetting.typeSelect') }}</span>
      <el-button icon="Tools" :link="true" type="primary" @click="openDialog()">
        {{ $demoi18n('panel.label.setting') }}
      </el-button>
    </div>
    <el-dialog
      v-model="dialogVisible"
      :title="$demoi18n('panel.typeSetting.typeSelect')"
      :width="width"
      append-to-body
      :destroy-on-close="true"
      :close-on-click-modal="false"
      :class="`${customClass} ${visualThemeClassName} ${xvueNameSpace}`"
    >
      <div class="cont">
        <PanelLabelOverflowTooltip ref="panelLabelOverflowTooltip" />
        <el-form v-panel-label-overflow-tooltip="getPanelLabelOverflowTooltip()" :model="form_">
          <div class="option-list">
            <VsFormItem :label="$demoi18n('panel.th.icon')">
              <el-radio-group v-model="form_.typeSetting.showIcon">
                <el-radio label="withIcon">{{ $demoi18n('panel.option.withIcon') }}</el-radio>
                <el-radio label="withoutIcon">{{ $demoi18n('panel.option.withoutIcon') }}</el-radio>
              </el-radio-group>
            </VsFormItem>
            <el-row :gutter="20">
              <el-col :span="12">
                <VsFormItem :label="$demoi18n('panel.label.arrangement')">
                  <el-select
                    v-model="form_.typeSetting.alineStyle"
                    :class="'panel-data-select-' + xvueTheme"
                    :popper-class="'select-poper-' + xvueTheme"
                    size="default"
                  >
                    <el-option
                      v-for="(item, index) in alineStyleOptions"
                      :key="'alineStyle' + index"
                      :label="item.label"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </VsFormItem>
              </el-col>
              <el-col v-if="showWidthStyle" :span="12">
                <VsFormItem :label="$demoi18n('multi-value.renderStyles')" tip-key="multiValue.widthStyle" has-tip-lock>
                  <el-select v-model="form_.typeSetting.widthStyle" size="default" :disabled="disabledWidthStyle">
                    <el-option :label="$demoi18n('multi-value.equidistant')" value="auto_width"></el-option>
                    <el-option :label="$demoi18n('multi-value.equalWidthEqualSpacing')" value="equal_width"></el-option>
                  </el-select>
                </VsFormItem>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <VsFormItem v-if="showSortType" :label="$demoi18n('panel.typeSetting.valuePreOrder')">
                  <el-radio-group v-model="form_.typeSetting.sortType">
                    <el-radio label="N">{{ $demoi18n('panel.option.NShaped') }}</el-radio>
                    <el-radio label="Z">{{ $demoi18n('panel.option.ZShaped') }}</el-radio>
                  </el-radio-group>
                </VsFormItem>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col v-if="showGridCountZ" :span="12">
                <VsFormItem :label="$demoi18n('panel.typeSetting.rowNum')">
                  <Range v-model:value="form_.typeSetting.gridCount.Z" :min="1" :max="1000" type="input" />
                </VsFormItem>
              </el-col>
              <el-col v-if="showGridCountN" :span="12">
                <VsFormItem :label="$demoi18n('panel.typeSetting.columnNum')">
                  <Range v-model:value="form_.typeSetting.gridCount.N" :min="1" :max="1000" type="input" />
                </VsFormItem>
              </el-col>
              <el-col v-if="showTextWidth" :span="12">
                <VsFormItem :label="$demoi18n('panel.typeSetting.nameWith')">
                  <Range v-model:value="form_.typeSetting.textWidth" :min="0" :max="10000" type="input" />
                </VsFormItem>
              </el-col>
              <el-col v-if="showValueWidth" :span="12">
                <VsFormItem :label="$demoi18n('panel.typeSetting.valueWith')">
                  <Range v-model:value="form_.typeSetting.valueWidth" :min="0" :max="10000" type="input" />
                </VsFormItem>
              </el-col>
              <el-col v-if="showExtraWidth" :span="12">
                <VsFormItem :label="$demoi18n('panel.typeSetting.valueAddWith')">
                  <Range v-model:value="form_.typeSetting.extraWidth" :min="0" :max="10000" type="input" />
                </VsFormItem>
              </el-col>
              <el-col :span="12">
                <VsFormItem :label="getLabel('name')">
                  <Range v-model:value="namePadding" :min="0" :max="10000" type="input" />
                </VsFormItem>
              </el-col>
              <el-col :span="12">
                <VsFormItem :label="getLabel('value')">
                  <Range v-model:value="valuePadding" :min="0" :max="10000" type="input" />
                </VsFormItem>
              </el-col>
              <el-col v-if="showMultiVal" :span="12">
                <VsFormItem :label="getLabel('extra')">
                  <Range v-model:value="extraPadding" :min="0" :max="10000" type="input" />
                </VsFormItem>
              </el-col>
              <el-col v-if="form_.typeSetting.showIcon === 'withIcon'" :span="12">
                <VsFormItem :label="getLabel('icon')">
                  <Range v-model:value="iconMargin" :min="0" :max="10000" type="input" />
                </VsFormItem>
              </el-col>
            </el-row>
          </div>
          <div class="block">
            <el-radio-group v-model="form_.typeSetting.componentType" @change="changeType()">
              <el-radio-button v-for="(item, index) in componentTypeList" :key="index" :label="item.no">
                <el-avatar
                  :class="`${form_.componentStyle}`"
                  shape="square"
                  :size="100"
                  :fit="item.img"
                  :src="item.img"
                ></el-avatar>
              </el-radio-button>
            </el-radio-group>
          </div>
        </el-form>
      </div>
      <template #footer>
        <span>
          <el-button size="small" @click="cancelForm()">{{ $demoi18n('btn.cancel') }}</el-button>
          <el-button type="primary" size="small" @click="submitForm()">
            {{ $demoi18n('btn.confirm') }}
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script>
import EchartCommonMixin from '@/components/common/echart/mixins/echart-common-mixin.js';
import PanelLabelOverflowTooltip from '@/components/common/overflow-tooltip/overflow-tooltip.vue';
import Range from '@/components/common/range/range.vue';
import VsFormItem from '@/components/common/vs-form-item/vs-form-item.vue';
import { $demoi18n, getLang } from '@/utils/lang';
import popupConfig from './component-type-popup-config';
import { imagesConfig } from './images-config';

export default {
  components: {
    Range,
    PanelLabelOverflowTooltip,
    VsFormItem,
  },
  mixins: [EchartCommonMixin],
  props: {
    form: Object,
    config: Object,
    width: {
      type: String,
      default: '680px',
    },
  },
  data() {
    return {
      xvueNameSpace: process.env.xvueNameSpace, // 给挂载在body下的元素加上主类名
      xvueTheme: window._adoPremise.uc.theme, // 'dark',
      imagesConfig,
      popupConfig,
      namePadding: 0,
      valuePadding: 0,
      extraPadding: 0,
      iconMargin: 0,
      dialogVisible: false,
      form_: {
        typeSetting: {
          textWidth: 120,
          valueWidth: 120,
          extraWidth: 120,
          showIcon: 'withIcon',
          gridCount: {
            Z: 2,
            N: 2,
          },
          sortType: 'Z',
          alineStyle: 'row',
          componentType: 0,
          nameStyle: {},
          valueStyle: {},
          extraStyle: {},
          iconStyle: {},
        },
      },
      comps: {},
      alineStyleOptions: [
        {
          value: 'row',
          label: this.$demoi18n('panel.radio.horizontalAlign'),
        },
        {
          value: 'column',
          label: this.$demoi18n('panel.radio.verticalAlign'),
        },
        {
          value: 'rect',
          label: this.$demoi18n('panel.typeSetting.MNpermution'),
        },
      ],
    };
  },
  computed: {
    showSortType() {
      return this.form_.typeSetting.alineStyle === 'rect';
    },
    showGridCountZ() {
      return this.form_.typeSetting.alineStyle === 'rect' && this.form_.typeSetting.sortType === 'Z';
    },
    showGridCountN() {
      return this.form_.typeSetting.alineStyle === 'rect' && this.form_.typeSetting.sortType !== 'Z';
    },
    customClass() {
      const arr = [
        'echart-property-popup_dialog',
        `echart-property-popup_dialog_${window._adoPremise.uc.theme || 'light'}`,
      ];
      return arr.join(' ');
    },
    isIcon() {
      // 兼容旧数据
      return ['withIcon', this.$demoi18n('panel.option.withIcon')].includes(this.form_.typeSetting.showIcon);
    },
    showTextWidth() {
      return this.form_.typeSetting.componentType === 1 && !this.isIcon;
    },
    showValueWidth() {
      return this.form_.typeSetting.componentType === 1 && !this.isIcon;
    },
    showMultiVal() {
      return this.config.config.data.tableData[3].mapping;
    },
    showExtraWidth() {
      const { tableData } = this.config.config.data;
      return this.form_.typeSetting.componentType === 1 && !this.isIcon && tableData[3].mapping;
    },
    showWidthStyle() {
      return this.form_.typeSetting.alineStyle !== 'column';
    },
    disabledWidthStyle() {
      return this.form_.typeSetting.componentType === 1 && !this.isIcon;
    },
    componentTypeList() {
      // 参考images文件目录
      const { tableData } = this.config.config.data;
      const componentStyle = this.form.componentStyle || 'light';
      const dimensionKey = this.form_.typeSetting.alineStyle === 'rect' ? 'rect' : 'line';
      let diretion = '';
      if (dimensionKey === 'line') {
        diretion = this.form_.typeSetting.alineStyle === 'row' ? 'row' : 'column';
      } else {
        diretion = this.form_.typeSetting.sortType === 'Z' ? 'row' : 'column';
      }
      const iconkey = this.isIcon ? 'withIcon' : 'withoutIcon';
      const multiVal = tableData[3].mapping ? 'multiVal' : 'singleVal';
      const langKey = getLang() === 'zh-CN' ? 'zh-CN' : 'en-US';

      /*
       * 由于横排，竖排，N排，Z排各种布局个数不一样，新增布局的话，按照索引定义componentType, 定义样式type_和class类，不区分排列方式的情况下，
       * 已经无法满足，因此修改索引改为布局图的名称，举例横排有图标到7，新增8,9布局，竖排图标到4，新增5,6布局，type_5和type_6已经使用过
       * 同样class5,6也使用了，可以将竖排的新增图标命名为8和9，这样type_8,type_9, class8,9就可以用了
       */
      const imgList = this.imagesConfig[langKey][componentStyle][dimensionKey][diretion][iconkey][multiVal];
      const list = [];
      for (let index = 0; index < imgList.length; index++) {
        const item = imgList[index];
        if (typeof item === 'object') {
          list.push({ img: item.img, no: item.no });
        } else {
          list.push({ img: item, no: index });
        }
      }
      return list;
    },
  },
  watch: {
    isIcon(nexVal, oldVal) {
      this.form_.typeSetting.componentType = 0;
    },
    namePadding(newVal, oldVal) {
      const key = this.getKey('name');
      this.nameStyle = {};
      this.setVal('nameStyle', key, newVal);
    },
    valuePadding(newVal, oldVal) {
      const key = this.getKey('value');
      this.valueStyle = {};
      this.setVal('valueStyle', key, newVal);
    },
    extraPadding(newVal, oldVal) {
      const key = this.getKey('extra');
      this.extraStyle = {};
      this.setVal('extraStyle', key, newVal);
    },
    iconMargin(newVal, oldVal) {
      const key = this.getKey('icon');
      this.iconStyle = {};
      this.setVal('iconStyle', key, newVal);
    },
    'form_.typeSetting.alineStyle'(alineStyle) {
      const map = {
        row: 'auto_width',
        column: 'equal_width',
        rect: 'equal_width',
      };
      this.form_.typeSetting.widthStyle = map[alineStyle];
    },
  },
  created() {
    this.syncForm(this.form, this.form_);
  },
  mounted() {
    this.initStyle();
  },
  methods: {
    getPanelLabelOverflowTooltip() {
      return {
        parentComp: this,
      };
    },
    changeType() {
      this.namePadding = 0;
      this.valuePadding = 0;
      this.extraPadding = 0;
      this.iconMargin = 0;
    },
    initStyle() {
      const nameKey = this.getKey('name');
      const valueKey = this.getKey('value');
      const extraKey = this.getKey('extra');
      const iconKey = this.getKey('icon');
      this.namePadding = this.form.typeSetting.nameStyle[nameKey] || 0;
      this.valuePadding = this.form.typeSetting.valueStyle[valueKey] || 0;
      this.extraPadding = this.form.typeSetting.extraStyle[extraKey] || 0;
      this.iconMargin = this.form.typeSetting.iconStyle[iconKey] || 0;
    },
    getLabel(key) {
      const { tableData } = this.config.config.data;
      const iconkey = this.isIcon ? 'withIcon' : 'withoutIcon';
      const multiVal = tableData[3].mapping ? 'multiVal' : 'singleVal';
      return this.popupConfig[multiVal][iconkey][`type_${this.form_.typeSetting.componentType}`][key].name;
    },
    getKey(str) {
      const { tableData } = this.config.config.data;
      const iconkey = this.isIcon ? 'withIcon' : 'withoutIcon';
      const multiVal = tableData[3].mapping ? 'multiVal' : 'singleVal';
      let _style = {};
      if (this.popupConfig[multiVal][iconkey][`type_${this.form_.typeSetting.componentType}`][str]) {
        _style = this.popupConfig[multiVal][iconkey][`type_${this.form_.typeSetting.componentType}`][str].style;
      }
      return Object.keys(_style)[0] || '';
    },
    setVal(key1, key2, val) {
      this.form_.typeSetting[key1] = {};
      this.form_.typeSetting[key1][key2] = val;
    },
    syncForm(srcForm, tarForm) {
      if (srcForm === this.form) {
        this.form_ = JSON.parse(JSON.stringify(this.form));

        // 兼容旧数据
        if (this.form_.typeSetting.showIcon === this.$demoi18n('panel.option.withIcon')) {
          this.form_.typeSetting.showIcon = 'withIcon';
        } else if (this.form_.typeSetting.showIcon === this.$demoi18n('panel.option.withoutIcon')) {
          this.form_.typeSetting.showIcon = 'withoutIcon';
        } else {}
      } else {
        this.form.typeSetting = this.form_.typeSetting;
      }
    },
    openDialog() {
      this.syncForm(this.form, this.form_);
      this.dialogVisible = true;
    },
    submitForm() {
      this.syncForm(this.form_, this.form);
      this.dialogVisible = false;
    },
    cancelForm() {
      this.dialogVisible = false;
    },
  },
};
</script>
<style lang="less" scoped>
:deep(.el-form-item__label) {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.option-list {
  margin-bottom: 20px;

  :deep(.el-form-item) {
    margin-bottom: 0px;
    display: flex;
    align-items: center;
  }
}

.echart-property-popup {
  .rooter {
    display: flex;
    justify-content: flex-start;
    align-items: center;

    .title {
      width: 78px;
      text-align: right;
      padding-right: 12px;
      display: inline-block;
    }

    :deep(.el-button) {
      text-align: left;
    }
  }
}

:deep(.el-radio-group) {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}

:deep(.el-radio-button__inner) {
  border: none;
  padding: 5px !important;
  height: 100%;
}

:deep(.el-radio-button:first-child .el-radio-button__inner) {
  height: 100%;
  border-left: none;
  padding: 0 5px;
}

:deep(.el-avatar) {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 130px !important;
  height: 130px !important;

  img {
    width: auto;
    height: auto;
    max-height: 100%;
    max-width: 100%;
  }
}

:deep(.el-avatar.dark) {
  background-color: rgb(13, 38, 58);
}

:deep(.el-avatar.light) {
  background-color: #fff;
}

:deep(.el-avatar.real) {
  background-color: #232323;
}

:deep(.el-radio-button) {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 15px;
  width: 22%;
  margin-right: 3%;
}

:deep(.el-col-12) {
  padding-left: 0px !important;
  padding-right: 0px !important;
}

:deep(.el-form-item__content) {
  flex: 1;
}
</style>

<style lang="less">
.echart-property-popup_dialog {
  .el-form-item__label {
    width: 130px;
  }
}

.echart-property-popup_dialog_dark {}
</style>
